@use "../variables" as *;

.svc-btn {
  display: flex;
  padding: var(--ctr-button-padding-vertical, var(--sjs-spacing-x2)) var(--ctr-button-padding-horizontal, var(--sjs-spacing-x6));
  justify-content: center;
  align-items: center;

  background-color: var(--ctr-button-background-color, var(--sjs-layer-1-background-500, #ffffffff));
  border-radius: var(--ctr-button-corner-radius, var(--sjs-corner-radius-x075));
  cursor: pointer;
  user-select: none;
  outline: solid calcSize(0.25) transparent;
  transition: background-color $creator-transition-duration;

  box-shadow: var(--ctr-button-shadow-offset-x, 0px)
    var(--ctr-button-shadow-offset-y, 1px)
    var(--ctr-button-shadow-blur, 2px)
    var(--ctr-button-shadow-spread, 0px) 
    var(--ctr-button-shadow-color, var(--sjs-special-shadow, #00000040));
}
.svc-btn__text {
  @include ctrDefaultBoldFont;
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
  color: var(--ctr-button-text-color, var(--sjs-primary-background-500, #19b394ff));
}

.svc-btn:hover {
  background-color: var(--ctr-button-background-color-hovered, var(--sjs-primary-background-10, #19b3941a));
}

.svc-btn:focus {
  box-shadow: 0 0 0 var(--ctr-button-border-width-focused, var(--sjs-stroke-x2)) var(--ctr-button-border-color-focused, var(--sjs-primary-background-500, #19b394ff));
}